import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
import { useState, useMemo, memo, useEffect } from 'react';
import Taro, { useLoad } from '@tarojs/taro';
import leftIcon from '../../../assets/left.svg'
import likeIcon from '../../../assets/icon4.png'
import collectIcon from '../../../assets/icon5.png'
import downloadIcon from '../../../assets/icon6.png'
import shareIcon from '../../../assets/icon7.png'
import './index.scss'

const arr = [{ title: '比例', value: '1:1' }, { title: '算法', value: 'SXR算法' }, { title: '模型', value: 'AI1' }, { title: '比例', value: '1:1' }, { title: '大哥哥', value: '啊山东科技' }, { title: '比例', value: '1:1' },]
const Details = () => {
  const [top, setTop] = useState(0)
  const [height, setHeight] = useState(0)
  useLoad(() => {
    Taro.getSystemInfo({
      success: function (res) {
        const { height } = Taro.getMenuButtonBoundingClientRect();
        res.statusBarHeight && setTop(res.statusBarHeight)
        height && setHeight(height)
        console.log(res)
      }
    });
  })
  return (
    <View className='Details'>
      <View className='Details_head'>
        <View className='head' style={{ marginTop: `${top}px`, height: `${height}px` }}>
          <Image onClick={() => Taro.navigateBack()} src={leftIcon} />
          <Text>AI出图</Text>
          <View></View>
        </View>
        <View className="btns">
          <Image src={likeIcon} />
          <Image src={collectIcon} />
          <Image src={downloadIcon} />
        </View>
      </View>
      <View className="info">
        <Text className="title">这次生成的效果真的太绝了！大家看看好看吗？这次生成的效果真的太绝了！大家看看好看吗？</Text>
        <View className="userinfo">
          <Image src="https://pzdsoss.pzds.com//im/20231101/14974e47_1698833412584.png" />
          <View>
            <Text>陈冠希</Text>
            <Text>UID：123123123</Text>
          </View>
        </View>
        <View className="otherinfo">
          <Text>4.2k 浏览量</Text>
          <Text>400 点赞</Text>
          <Text>40 收藏</Text>
          <View>
            <Image src={shareIcon} />
            <Text>分享</Text>
          </View>
        </View>
      </View>
      <View className="params">
        {arr.map(e => <View className='params_item'>
          <Text>{e.title}</Text>
          <Text>{e.value}</Text>
        </View>)}
      </View>
    </View>
  )
}
export default Details